<script setup>
const menuList = [
  { name: '用户主页', icon: 'user', path: '/user/home' },
  { name: '我的课程', icon: 'user', path: '/user/course' },
  { name: '我的考试', icon: 'user', path: '/user/exam' },
  // { name: '我的习题', icon: 'user', path: '/user/ques' },
  {
    name: '反馈中心', icon: 'user', isSubMenu: true,
    children: [
      { name: '问卷反馈', icon: 'user', path: '/user/feedback/survey' },
      { name: '每日反馈', icon: 'user', path: '/user/feedback/day' },
      { name: '意见申诉', icon: 'user', path: '/user/feedback/complaint' }
    ]
  },
  { name: '消息中心', icon: 'user', path: '/user/message' },
  {
    name: '我的设置', icon: 'user', isSubMenu: true,
    children: [
      { name: '资料修改', icon: 'user', path: '/user/setting/profile' },
      { name: '重置密码', icon: 'user', path: '/user/setting/password' }
    ]
  }
]
</script>

<template>
  <div class="flex w-[1200px] mx-auto mt-[20px]">
    <div class="w-[200px] bg-[#fff] py-[20px] b-1 b-solid b-color-[var(--el-border-color-light)]">
      <div class="text-center text-[#333] mb-[20px]">用户中心</div>
      <el-menu router style="border:none">
        <template v-for="item in menuList" :key="item.name">
          <el-menu-item :index="item.path"  v-if="!item.isSubMenu">
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
          <el-sub-menu v-else>
            <template #title>
              <el-icon>
                <component :is="item.icon" />
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item :index="child.path" v-for="child in item.children" :key="child.name">
              <el-icon>
                <component :is="child.icon" />
              </el-icon>
              <span>{{ child.name }}</span>
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
    <div class="flex-1 min-w-0 ml-[20px]">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
